<template>
	<div class="comment-list">
		<div class="page-title" v-if="comments.length">
      评论
    </div>
		<div
			class="comment"
			v-for='comment in comments' 
			:key='comment.id'
			@click='handleClick(comment)'
			>
      <div class="user">
        <div class="inline">
          <img
						:src="comment.user_info.avatar" 
            class="avatar"
            mode='aspectFit'
          >
          {{ comment.user_info.nickName }}
        </div>
        <div class="right">
          {{ comment.location || '未知地点' }}
          <span class="text-primary">
            --
          </span>
          {{ comment.phone || '未知型号' }}
        </div>
      </div>
      <div class="content">
        {{ comment.comment }}
      </div>
			<p style='text-align: right;'>{{ comment.createTime }}</p>
    </div>
	</div>
</template>
<script>
export default {
  name: 'commentList',
  props: {
    comments: {
      type: Array,
      default () {
        return []
      }
    },
    type: {
      type: String,
      default: ''
    }
  },
  data () {
    return {}
  },
  methods: {
    handleClick (comment) {
      if (this.type === 'user') {
        wx.navigateTo({
          url: `/pages/bookDetail/main?isbn=${comment.book_isbn}`
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
	.comment-list {
		font-size: 14px;
		.page-title{
			// padding-left: 20px;
			background: #eee;
			line-height: 40px;
			text-align: center;
			font-size: 16px;
		}
		.comment {
			background: white;
			margin-bottom:10px;
			padding:5px 20px;
			.content{
				margin:10px 0;
			}
			.user {
				display: flex;
				justify-content: space-between;
				.inline {
					// display:inline;
					display: flex;
					align-items: center;
					.avatar {
						width: 20px;
						height: 20px;
						border-radius: 50%;
					}
				}
				.right {
					float: right;
				}
			}
		}
	}
</style>